<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <CardTitle title="用户标签" />
      </div>
    </template>

    <div class="tags-container">
      <TagSelector
        v-model="tags"
        placeholder="点击选择用户标签"
        :show-close="false"
        @change="handleTagsChange"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { CardTitle } from '@/components/Card/index'
import TagSelector from '@/components/TagSelector/index.vue'
import type { Tag } from '@/api/localLife/spu'
import * as MemberUserApi from '@/api/member/user'

const props = defineProps<{
  user: object,
}>()

const message = useMessage()

// 用户标签数据 - 字符串数组格式
const tags = ref<string[]>([])

/** 获取用户标签列表 */
const getUserTags = async () => {
  try {
    // 直接使用用户信息中的字符串数组格式
    if (props.user && props.user.tags && Array.isArray(props.user.tags)) {
      tags.value = [...props.user.tags]  // 直接赋值 ["健康", "肠胃"]
    }
  } catch (error) {
    console.error('获取用户标签失败:', error)
  }
}

/** 标签变更回调 */
const handleTagsChange = async (newTags: string[]) => {
  try {
    // newTags 现在直接是字符串数组，无需转换
    // 调用会员用户更新接口，只传递用户ID和标签数组
    await MemberUserApi.updateUser({
      ...props.user,
      tags: newTags
    })

    // 更新本地标签数据
    tags.value = [...newTags]

    message.success('用户标签更新成功')
  } catch (error) {
    message.error('用户标签更新失败')
    console.error('更新用户标签失败:', error)
  }
}

// 监听用户数据变化
watch(() => props.user, (newUser) => {
  if (newUser && newUser.tags && Array.isArray(newUser.tags)) {
    tags.value = [...newUser.tags]
  }
}, { immediate: true, deep: true })

onMounted(() => {
  getUserTags()
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags-container {
  min-height: 100px;
}
</style>
